<template>
	<view class="container">
		<view class="header">
			<text class="title">导航指南</text>
		</view>
		
		<!-- 地图显示区域 -->
		<view class="map-container">
			<map 
				id="map"
				class="map"
				:latitude="currentLocation.latitude"
				:longitude="currentLocation.longitude"
				:markers="markers"
				scale="14"
				show-location
			></map>
		</view>
		
		<!-- 当前地点信息 -->
		<view class="current-location">
			<view class="location-name">{{currentLocation.name}}</view>
			<view class="location-address">{{currentLocation.address}}</view>
			<button class="navigate-btn" @tap="openMapNavigation(currentLocation)">导航到这里</button>
		</view>
		
		<!-- 分类选项卡 -->
		<view class="tabs">
			<view 
				class="tab-item" 
				v-for="(tab, index) in tabs" 
				:key="index"
				:class="{'active': currentTab === tab.type}"
				@tap="switchTab(tab.type)"
			>
				<view class="tab-icon" :class="tab.iconClass">{{tab.icon}}</view>
				<text class="tab-text">{{tab.name}}</text>
			</view>
		</view>
		
		<!-- 位置列表 -->
		<view class="locations-container">
			<view class="locations-list">
				<view class="location-item" 
					v-for="(item, index) in filteredLocations" 
					:key="'loc-'+index" 
					@tap="selectLocation(item)"
					:class="{'active': currentLocation.name === item.name}"
				>
					<image v-if="item.image" :src="item.image" mode="aspectFill" class="location-image"></image>
					<view v-else class="service-icon" :class="item.iconClass">{{item.icon}}</view>
					<view class="location-info">
						<text class="location-name">{{item.name}}</text>
						<text class="location-address">{{item.address}}</text>
						<view class="location-distance" v-if="item.distance">{{item.distance}}</view>
					</view>
				</view>
			</view>
			
			<!-- 无数据提示 -->
			<view class="empty-tip" v-if="filteredLocations.length === 0">
				<image src="/static/logo.png" mode="aspectFit" class="empty-image"></image>
				<text class="empty-text">暂无{{getTabName(currentTab)}}信息</text>
			</view>
		</view>
	</view>
</template>

<script>
// 使用简单的页面逻辑，只用微信内置地图
import iconService from '../../services/icon.js';

export default {
	data() {
		const beachLocation = {
			name: '沙扒湾海滩',
			address: '广东省阳江市阳西县沙扒镇',
			latitude: 21.518411,  // 更新为准确纬度
			longitude: 111.479953, // 更新为准确经度
			image: '/static/attractions/beach.jpg',
			distance: '中心位置',
			type: 'attraction'  // 添加类型标记
		};
		
		return {
			// 用户当前位置
			userLocation: {
				latitude: 21.518411,
				longitude: 111.479953
			},
			// 是否已获取用户位置
			hasUserLocation: false,
			// 当前选中的位置（默认为沙扒湾海滩）
			currentLocation: beachLocation,
			// 当前选中的tab
			currentTab: 'all',  // 默认显示全部
			// tab选项
			tabs: [
				{ name: '全部', type: 'all', iconCode: 'nav_all', icon: '🏠', iconClass: 'all-icon' },
				{ name: '景点', type: 'attraction', iconCode: 'nav_attraction', icon: '🏖️', iconClass: 'attraction-icon' },
				{ name: '厕所', type: 'toilet', iconCode: 'nav_toilet', icon: '🚾', iconClass: 'toilet-icon' },
				{ name: '停车场', type: 'parking', iconCode: 'nav_parking', icon: 'P', iconClass: 'parking-icon' },
				{ name: '医疗', type: 'hospital', iconCode: 'nav_hospital', icon: '⚕', iconClass: 'hospital-icon' }
			],
			// 地图标记点
			markers: [
				{
					id: 1,
					latitude: beachLocation.latitude,
					longitude: beachLocation.longitude,
					title: beachLocation.name,
					iconPath: '/static/logo.png',
					width: 32,
					height: 32,
					callout: {
						content: beachLocation.name,
						color: '#000000',
						fontSize: 14,
						borderRadius: 4,
						padding: 8,
						display: 'ALWAYS'
					}
				}
			],
			// 预设的沙扒湾景点位置
			attractions: [
				{
					name: '沙扒湾海滩',
					address: '广东省阳江市阳西县沙扒镇',
					latitude: 21.518411,
					longitude: 111.479953,
					image: '/static/attractions/beach.jpg',
					distance: '',
					type: 'attraction'
				},
				{
					name: '十里银滩',
					address: '广东省阳江市阳西县沙扒镇西南部',
					latitude: 21.55982,
					longitude: 111.97358,
					image: '/static/attractions/silver-beach.jpg',
					distance: '',
					type: 'attraction'
				},
				{
					name: '海上丝绸之路博物馆',
					address: '广东省阳江市阳西县沙扒镇沙扒村',
					latitude: 21.57243,
					longitude: 111.98762,
					image: '/static/attractions/museum.jpg',
					distance: '',
					type: 'attraction'
				},
				{
					name: '大角湾',
					address: '广东省阳江市阳西县沙扒镇东北部',
					latitude: 21.58345,
					longitude: 111.99834,
					image: '/static/attractions/cape.jpg',
					distance: '',
					type: 'attraction'
				},
				{
					name: '月亮湾',
					address: '广东省阳江市阳西县沙扒镇南部',
					latitude: 21.55123,
					longitude: 111.98012,
					image: '/static/attractions/moon-bay.jpg',
					distance: '',
					type: 'attraction'
				},
				{
					name: '沙扒湾医院',
					address: '广东省阳江市阳西县沙扒镇健康路18号',
					latitude: 21.57123,
					longitude: 111.98934,
					icon: '⚕',
					iconClass: 'hospital-icon',
					distance: '',
					type: 'hospital'
				},
				{
					name: '阳西县人民医院',
					address: '广东省阳江市阳西县织篢镇环城路',
					latitude: 21.75234,
					longitude: 111.87612,
					icon: '⚕',
					iconClass: 'hospital-icon',
					distance: '',
					type: 'hospital'
				},
				{
					name: '沙扒湾中心停车场',
					address: '广东省阳江市阳西县沙扒镇海滨路附近',
					latitude: 21.56812,
					longitude: 111.98356,
					icon: 'P',
					iconClass: 'parking-icon',
					distance: '',
					type: 'parking'
				},
				{
					name: '海滨广场停车场',
					address: '广东省阳江市阳西县沙扒镇海滨广场',
					latitude: 21.51923,
					longitude: 111.47563,
					icon: 'P',
					iconClass: 'parking-icon',
					distance: '',
					type: 'parking'
				},
				{
					name: '游客中心停车场',
					address: '广东省阳江市阳西县沙扒镇旅游大道',
					latitude: 21.52156,
					longitude: 111.48125,
					icon: 'P',
					iconClass: 'parking-icon',
					distance: '',
					type: 'parking'
				},
				{
					name: '沙扒镇公共厕所1',
					address: '广东省阳江市阳西县沙扒镇海滨广场旁',
					latitude: 21.56723,
					longitude: 111.98587,
					icon: '🚾',
					iconClass: 'toilet-icon',
					distance: '',
					type: 'toilet'
				},
				{
					name: '沙扒镇公共厕所2',
					address: '广东省阳江市阳西县沙扒镇滨海路',
					latitude: 21.51765,
					longitude: 111.47823,
					icon: '🚾',
					iconClass: 'toilet-icon',
					distance: '',
					type: 'toilet'
				},
				{
					name: '沙扒镇公共厕所3',
					address: '广东省阳江市阳西县沙扒镇海滨大道',
					latitude: 21.52453,
					longitude: 111.48264,
					icon: '🚾',
					iconClass: 'toilet-icon',
					distance: '',
					type: 'toilet'
				}
			],
			// 图标是否加载完成
			isIconsLoaded: false
		};
	},
	
	computed: {
		// 根据当前选中的tab筛选位置列表
		filteredLocations() {
			let locations = [...this.attractions];
			
			// 如果不是"全部"，则筛选对应类型
			if (this.currentTab !== 'all') {
				locations = locations.filter(location => location.type === this.currentTab);
			}
			
			return locations;
		}
	},
	
	onLoad() {
		// 获取用户位置
		this.getUserLocation();
		
		// 加载图标
		this.loadIcons();
	},
	
	methods: {
		// 获取用户位置
		getUserLocation() {
			uni.showLoading({
				title: '获取位置中...'
			});
			
			wx.getLocation({
				type: 'gcj02',
				success: (res) => {
					console.log('位置获取成功:', res);
					
					// 更新用户位置
					this.userLocation = {
						latitude: res.latitude,
						longitude: res.longitude
					};
					
					this.hasUserLocation = true;
					
					// 计算各位置距离
					this.calculateDistances();
					
					uni.hideLoading();
				},
				fail: (err) => {
					console.error('位置获取失败:', err);
					
					// 使用沙扒湾海滩位置作为默认位置
					this.userLocation = {
						latitude: 21.518411,
						longitude: 111.479953
					};
					
					// 计算各位置距离
					this.calculateDistances();
					
					uni.showToast({
						title: '使用默认位置',
						icon: 'none'
					});
					
					uni.hideLoading();
				}
			});
		},
		
		// 计算用户到各位置的距离
		calculateDistances() {
			// 遍历所有位置并计算距离
			this.attractions.forEach(location => {
				const distance = this.calculateDistance(
					this.userLocation.latitude,
					this.userLocation.longitude,
					location.latitude,
					location.longitude
				);
				
				// 更新距离
				if (distance < 1) {
					location.distance = `${Math.round(distance * 1000)}米`;
				} else {
					location.distance = `${distance.toFixed(1)}公里`;
				}
				
				// 存储原始距离值用于排序
				location.distanceValue = distance;
			});
			
			// 根据距离排序
			this.attractions.sort((a, b) => a.distanceValue - b.distanceValue);
		},
		
		// 计算两点间的距离（Haversine公式）
		calculateDistance(lat1, lon1, lat2, lon2) {
			const R = 6371; // 地球半径，单位km
			const dLat = this.deg2rad(lat2 - lat1);
			const dLon = this.deg2rad(lon2 - lon1);
			const a = 
				Math.sin(dLat/2) * Math.sin(dLat/2) +
				Math.cos(this.deg2rad(lat1)) * Math.cos(this.deg2rad(lat2)) * 
				Math.sin(dLon/2) * Math.sin(dLon/2); 
			const c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1-a)); 
			const distance = R * c; // 距离，单位km
			return distance;
		},
		
		// 角度转弧度
		deg2rad(deg) {
			return deg * (Math.PI/180);
		},
		
		// 切换tab
		switchTab(tabType) {
			this.currentTab = tabType;
		},
		
		// 获取Tab名称
		getTabName(tabType) {
			const tab = this.tabs.find(item => item.type === tabType);
			return tab ? tab.name : '';
		},
		
		// 选择位置
		selectLocation(location) {
			this.currentLocation = location;
			
			// 更新地图标记
			this.markers = [{
				id: 1,
				latitude: location.latitude,
				longitude: location.longitude,
				title: location.name,
				iconPath: '/static/logo.png',
				width: 32,
				height: 32,
				callout: {
					content: location.name,
					color: '#000000',
					fontSize: 14,
					borderRadius: 4,
					padding: 8,
					display: 'ALWAYS'
				}
			}];
		},
		
		// 打开微信内置地图导航
		openMapNavigation(location) {
			wx.openLocation({
				latitude: parseFloat(location.latitude),
				longitude: parseFloat(location.longitude),
				name: location.name,
				address: location.address,
				scale: 18
			});
		},
		
		// 加载图标数据
		loadIcons() {
			// 获取所有图标编码
			const iconCodes = this.tabs.map(tab => tab.iconCode);
			
			// 获取图标映射
			iconService.getIconsMap(iconCodes)
				.then(iconsMap => {
					// 更新tab图标
					this.tabs.forEach(tab => {
						const iconContent = iconsMap[tab.iconCode];
						if (iconContent) {
							// 如果是base64或URL
							tab.icon = iconContent;
						}
						// 如果获取失败，保留默认的emoji图标
					});
					
					this.isIconsLoaded = true;
				})
				.catch(err => {
					console.error('加载图标失败:', err);
					this.isIconsLoaded = true;
					// 发生错误时保留默认的emoji图标
				});
		}
	}
};
</script>

<style>
.container {
	position: relative;
	height: 100vh;
	width: 100%;
	display: flex;
	flex-direction: column;
}

.header {
	height: 80rpx;
	display: flex;
	justify-content: center;
	align-items: center;
	background-color: #3a7cff;
	color: #fff;
}

.title {
	font-size: 34rpx;
	font-weight: bold;
}

.map-container {
	width: 100%;
	height: 350rpx;
}

.map {
	width: 100%;
	height: 100%;
}

.current-location {
	padding: 20rpx 30rpx;
	background-color: white;
	box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1);
}

.location-name {
	font-size: 32rpx;
	font-weight: bold;
	margin-bottom: 10rpx;
}

.location-address {
	font-size: 26rpx;
	color: #666;
	margin-bottom: 15rpx;
}

.navigate-btn {
	background-color: #3a7cff;
	color: white;
	font-size: 28rpx;
	border-radius: 50rpx;
	height: 70rpx;
	line-height: 70rpx;
}

.tabs {
	display: flex;
	background-color: white;
	padding: 20rpx 0;
	border-bottom: 1rpx solid #eee;
}

.tab-item {
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 10rpx 0;
}

.tab-item.active {
	color: #3a7cff;
}

.tab-icon {
	font-size: 36rpx;
	margin-bottom: 5rpx;
}

.tab-text {
	font-size: 24rpx;
}

.locations-container {
	flex: 1;
	overflow-y: auto;
	background-color: #f5f5f5;
}

.locations-list {
	padding: 15rpx;
}

.location-item {
	display: flex;
	padding: 20rpx;
	background-color: white;
	border-radius: 10rpx;
	margin-bottom: 15rpx;
	box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
}

.location-item.active {
	border-left: 8rpx solid #3a7cff;
}

.location-image {
	width: 160rpx;
	height: 120rpx;
	border-radius: 8rpx;
	margin-right: 20rpx;
}

.service-icon {
	width: 120rpx;
	height: 120rpx;
	border-radius: 8rpx;
	margin-right: 20rpx;
	background-color: #f0f0f0;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 48rpx;
}

.location-info {
	flex: 1;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}

.location-distance {
	color: #3a7cff;
	font-size: 24rpx;
}

.empty-tip {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 60rpx 0;
}

.empty-image {
	width: 160rpx;
	height: 160rpx;
	margin-bottom: 20rpx;
}

.empty-text {
	color: #999;
	font-size: 28rpx;
}

/* 图标样式 */
.all-icon {
	color: #666;
}

.attraction-icon {
	color: #ff9500;
}

.toilet-icon {
	color: #34c759;
}

.parking-icon {
	color: #007aff;
}

.hospital-icon {
	color: #ff3b30;
}

.info-icon {
	color: #5856d6;
}
</style> 